<template>
	<view class="content">
		<!-- 确认兑换弹窗 -->
		<uni-popup :show="type === 'exchange'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">安全密码</text>
				<view class="safeinpbox" style="margin-bottom: 30upx;">
					<input type="password" v-model="safeword" value="" placeholder="输入安全密码"/>
				</view>
				<view class="uni-tip-group-button  uni-tip-group">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmPublish()">确定</text>
				</view>
			</view>
		</uni-popup>
		<!-- 产品不足的弹窗 -->
		<uni-popup :show="type === 'unenough'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="enoughbox">
				<view class="uni-tip-contents">非常抱歉，您的{{duihuanname}}数量不够，无法进行本次兑换！</view>
				<view class="uni-tip-group-button">
					<text class="backbtn" @click="togglePopup('')" >返回</text>
				</view>
			</view>
		</uni-popup>
		<!-- 兑换弹窗 -->
		<uni-popup :show="type === 'duihuan'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="enoughbox">
				<view class="uni-tip-contents">您将减少<text style="display: inline-block;margin-left: 6upx;padding: 4upx 12upx;border-bottom: 2upx solid #333;">{{changeitem.main_num}}</text>{{duihuanname}}</view>
				<view class="uni-tip-contents obtain">可获得<text style="display: inline-block;margin-left: 6upx;padding: 4upx 24upx;border-bottom: 2upx solid #333;">{{changeitem.son_file_num}}</text>{{changeitem.son_file_code}}</view>
				<view class="safeinpbox">
					<input type="password" v-model="mysafeword" placeholder="输入安全密码"/>
				</view>
				<view class="uni-tip-group-button">
					<text class="backbtn" @click="confirmit()" >确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="fixedtop">
			<view class="pageHeader">
				兑换大厅
				<a class="generalBack" @click="backpage()" hover-class="none">
					<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
				</a>
			</view>
			<view class="navbar">
				<view v-for="(navitem, index) in navList" :key="index" class="nav-item" 
				 @click="tabClick(index)">
					<text class="navtxt" :class="{current: tabCurrentIndex === index}">{{navitem.text}}</text>
				</view>
			</view>
			<view style="padding: 18upx 0;">
				<view>
					<view class="flex aic jc-center" >
						<view v-if="tabCurrentIndex===0">
							<view class="flex aic">
								<view class="grey"></view>
								<text style="font-size:30upx;font-weight: 600;">SDVS</text>
							</view>
							<view class="inputbox">
								<input type="number" class="exinput" placeholder="兑换数量" @input="sdchange(0)" v-model="sdnum"/>
							</view>
						</view>
						<view style="position: relative;" v-if="tabCurrentIndex===1">
							<view class="flex aic"  @click="toggleshow()">
								<view class="grey"></view>
								<text style="font-size:30upx;font-weight: 600;margin-right: 20upx;">{{changename}}</text>
								<image src="../../static/exchange/ex-2.png" style="width: 18upx;height: 10upx;"></image>
							</view>
							<view class="inputbox">
								<input type="text" class="exinput" placeholder="兑换数量" @input="sdchange(1)" v-model="othernum"/>
							</view>
							<!-- 列表 -->
							<view class="availist" v-show="listshow">
								<view v-for="(bitem,bindex) in availist" :key="bindex" class="aitem flex aic"  @click="changelist(bitem,1)">
									<view class="grey"></view>
									{{bitem.code}}
								</view>
							</view>
						</view>
						<image src="../../static/exchange/ex-1.png" style="width: 32upx;height: 32upx;margin: 0 70upx;"></image>
						<view v-if="tabCurrentIndex===1">
							<view class="flex aic">
								<view class="grey"></view>
								<text style="font-size:30upx;font-weight: 600;">SDVS</text>
							</view>
							<view class="inputbox">
								<input type="text" class="exinput" placeholder="获取数量" v-model="sdchangenum"  disabled="disabled"/>
							</view>
						</view>
						<view style="position: relative;" v-if="tabCurrentIndex===0"> 
							<view class="flex aic"  @click="toggleshow()">
								<view class="grey"></view>
								<text style="font-size:30upx;font-weight: 600;margin-right: 20upx;">{{changename}}</text>
								<image src="../../static/exchange/ex-2.png" style="width: 18upx;height: 10upx;"></image>
							</view>
							<view class="inputbox">
								<input type="text" class="exinput" placeholder="获取数量" disabled="disabled"  v-model="changenum"/>
							</view>
							<!-- 列表 -->
							<view class="availist" v-show="listshow">
								<view v-for="(aitem,aindex) in availist" :key="aindex" class="aitem flex aic" @click="changelist(aitem,0)">
									<view class="grey"></view>
									{{aitem.code}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="exrule">
					规则
					<text style="font-weight: 600;display: inline-block;margin-left: 6upx;padding: 4upx 12upx;border-bottom: 2upx solid #333;">{{rate}}</text>
					<text style="font-weight: 600;">{{changename}} = 1 SDVS</text>
				</view>
				<view class="exbtn" @click="publish()">
					兑换发布
				</view>
			</view>
			
			<view style="border-top:2upx solid #eee;padding: 20upx 0 20upx 58upx;font-size: 28upx;">自选交易</view>
		</view>
		
		<!-- 底部 轮播信息-->
	<!-- 	<view class="btmbox">
			<view style="padding: 10upx 50upx;" class="flex aic jsb">
				<view class="recentbox flex aic">
					<view class="recent">最近<br>兑换</view>
					<view>成功获取森岛帆高</view>
				</view>
				<view>100 XXX</view>
			</view>
		</view> -->
		<view style="padding-top:730upx;background-color: #fff;">
			<scroll-view scroll-y="true" >
				<view v-if="changeList.length<=0" class="empty">
					<image src="/static/empty.png"></image>
					<view class="empty-tips">
						暂无兑换信息~
					</view>
				</view>
				<view>
					<view v-for="(item,index) in changeList" :key="index" class="changeitem">
						<view class="changename">挂卖人：{{item.sell_nickname}}</view>
						<view class="flex aic">
							<view class="changetxt">{{item.main_num}}  {{item.main_file_code}}</view>
							<image src="../../static/exchange/ex-1.png" class="changeimg"></image>
							<view class="changetxt">{{item.son_file_num}}  {{item.son_file_code}}</view>
						</view>
						<view class="exchangebtn" @click="myexchange(item)">兑换</view>
					</view>
				</view>
				<view class="loading"  v-if="changeList.length>0">{{ loadingText }}</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import * as util from '../../common/util.js'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken: '', // token
				sdnum:null,//兑换的SDVS数量
				changename:'',
				changeitem:{},//可以兑换的对象
				mySDVS:null,
				chooseFileid:null,// 选择的列表id
				chooseFile:{},// 选择的列表
				sdvFile:{},
				othernum:null,
				sdchangenum:null,
				changenum:null,
				duihuanname:'SDVS',
				loadingText:'加载中...',
				availist:[],// 兑换列表
				listshow:false,
				rate:null,//汇率
				changeList: [],//列表
				tabCurrentIndex: 0, //头部切换
				type: '',
				pageindex:0,
				safeword: '', //安全密码
				mysafeword: '', //安全密码
				navList: [{
						state: 0,
						text: 'SDVS兑换'
					},
					{
						state: 1,
						
						text: '兑换SDVS'
					}
				],
			}
		},
		components: {
			uniPopup
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.getfilelist()
			that.get_change_list()
		},
		methods: {
			// 返回上一页
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取文件夹列表
			getfilelist(){
				let that = this
				postAjax('file/fileInfo',{token:that.userToken},function(data){
					// 汇率 选择不同文件  保存 sdvFile 对象
					let filedata = data.data 
					let disfile = filedata.filter(item=>item.code==='SDVS')
					that.sdvFile = disfile[0]
					that.mySDVS =Number(disfile[0].file_num) 
					that.availist = filedata.filter(item=>item.code!=='SDVS')
					that.chooseFile = that.availist[0]
					that.changename = that.availist[0].code
					that.chooseFileid = that.availist[0].id
					let orate = that.sdvFile.valuepershare/that.availist[0].valuepershare
					that.rate = util.scientificToNumber(orate)
				})
			},
			togglePopup(type) {
				this.type = type;
			},
			toggleshow(){
				this.listshow = !this.listshow
			},
			// input oninput事件
			sdchange(type){
				let that = this
				console.log(that.rate)
				if(that.rate===null){
					let title = that.tabCurrentIndex ==0?'请选择要兑换的产品':'请选择要兑换成SDVS的产品'
					uni.showToast({
						title:title,
						icon:'none'
					})
					return
				}
				if(type==0){
					let result = util.floatMul(that.rate,that.sdnum)
					let oresult =util.scientificToNumber(result)
					that.changenum = that.sdnum!==null?oresult:''
				}else{
					let presult = util.scientificToNumber(that.othernum/that.rate)
					that.sdchangenum = that.othernum!==null?presult:''
				}
			},
			// 选择列表
			changelist(item,type){
				let that = this
				that.chooseFile = item
				that.changename = item.code
				that.chooseFileid = item.id
				that.listshow = !that.listshow
				that.rate = util.scientificToNumber(that.sdvFile.valuepershare/item.valuepershare)
				if(type===0){
					if(that.sdnum){
						let sresult = util.floatMul(that.rate,that.sdnum)
						that.changenum = util.scientificToNumber(sresult)
					}
				}else{
					if(that.othernum){
						let wresult = util.scientificToNumber(that.othernum/that.rate)
						that.sdchangenum = wresult
					}
				}
			},
			//顶部tab点击
			tabClick(index,id) {
				let that = this
				that.tabCurrentIndex = index;
				that.changename = that.availist[0].code
				that.listshow =false
				that.othernum = null
				that.sdchangenum = null
				that.sdnum = null
				that.changenum = null
				let clickRate = that.sdvFile.valuepershare/that.availist[0].valuepershare
				console.log(clickRate)
				that.rate = util.scientificToNumber(clickRate)
				that.pageindex = 0
				that.changeList = []
				that.get_change_list()
			},
			// 兑换其他
			myexchange(item){
				let that = this
				that.duihuanname = item.main_file_code
				if(item.main_file_code=='SDVS'){
					that.type = Number(item.main_num)>that.mySDVS?'unenough':'duihuan'
					that.changeitem =Number(item.main_num)>that.mySDVS?{}:item
				}else{
					// let exname =  that.availist.filter((i,index)=>{
					// 	return i.code === item.main_file_code
					// })
					// that.type =Number(item.main_num)>exname[0].file_num?'unenough':'duihuan'
					// that.changeitem = Number(item.main_num)>exname[0].file_num?{}:item
					that.type ='duihuan'
					that.changeitem = item
				}
			},
			// 确定兑换
			confirmit(){
				let that = this
				if(!that.mysafeword){
					uni.showToast({
						title:'请输入安全密码',
						icon:'none'
					})
					return
				}
				let exdata = {
					token:that.userToken,
					exchange_id:that.changeitem.id,
					paypwd:that.mysafeword
				}
				
				postAjax('file/SelectExchange',exdata,function(data){
					console.log(data)
					if(data.code==0){
						uni.showToast({
							title:'兑换成功',
							icon:'none'
						})
						let index = that.changeList.findIndex(val => val.id === that.changeitem.id)
						index !== -1 && that.changeList.splice(index, 1)
					}else{
						uni.showToast({
							title:'兑换失败',
							icon:'none'
						})
					}
				})
				that.type = ''
			},
			// 兑换发布
			publish(){
				let that = this
				if(that.rate===null){
					let title = that.tabCurrentIndex ==0?'请选择要兑换的产品':'请选择要兑换成SDVS的产品'
					uni.showToast({
						title:title,
						icon:'none'
					})
					return
				}
				if(that.tabCurrentIndex==0){
					if(!that.sdnum){
						uni.showToast({
							title:'请输入兑换的SDVS数量',
							icon:'none'
						})
						return	
					}
					if(that.sdnum>that.mySDVS){
						that.changename = 'SDVS'
						uni.showToast({
							title:'您的SDVS数量不足',
							icon:'none'
						})
						that.sdnum = null
						that.changenum = null
						return
					}
				}
				if(that.tabCurrentIndex==1){
					if(!that.othernum){
						uni.showToast({
							title:'请输入兑换的'+that.changename+'数量',
							icon:'none'
						})
						return	
					}
					if(that.othernum>that.mySDVS){
						uni.showToast({
							title:'您的'+that.changename+'数量不足',
							icon:'none'
						})
						that.othernum = null
						that.sdchangenum = null
						return
					}
				}
				that.type = 'exchange'
			},
			// 确定发布
			confirmPublish(){
				let that = this
				if(!that.safeword){
					uni.showToast({
						title:'请输入安全密码',
						icon:'none'
					})
					return
				}
				let mainfile = that.tabCurrentIndex==0?that.sdvFile:that.chooseFile
				console.log(mainfile)
				let sonfile = that.tabCurrentIndex ==0?that.chooseFile:that.sdvFile
				if(mainfile.is_exchange==0){
					uni.showToast({
						title:mainfile.code+'不允许兑换成其他文件',
						icon:'none'
					})
					that.safeword = ''
					return
				}
				if(sonfile.is_exchange==0){
					uni.showToast({
						title:sonfile.code+'不允许被兑换',
						icon:'none'
					})
					that.safeword = ''
					return
				}
				let postnum = that.tabCurrentIndex ==0?that.sdnum:that.othernum
				let main_file_id = that.tabCurrentIndex ==0?that.sdvFile.id:that.chooseFileid
				let son_file_id = that.tabCurrentIndex ==0?that.chooseFileid:that.sdvFile.id
				let pubdata = {
					token:that.userToken,
					type:that.tabCurrentIndex+1,
					num:postnum,
					main_file_id:main_file_id,
					son_file_id:son_file_id,
					paypwd:that.safeword
				}
				postAjax('file/fileExchangeRelease',pubdata,function(data){
					if(data.code==0){
						uni.showToast({
							title:'兑换发布成功',
							icon:'none'
						})
					}else{
						uni.showToast({
							title:data.msg,
							icon:'none'
						})
					}
				})
				that.changename=that.availist[0].code
				that.othernum=null
				that.sdnum =null
				that.sdchangenum=null
				that.changenum=null
				that.safeword = ''
				that.type=''
			},
			// 获取兑换信息
			get_change_list(){
				let that = this
				uni.showNavigationBarLoading();
				let oindex = that.tabCurrentIndex+1
				let postdata = {
					type:oindex,
					m:that.pageindex,
					n:8
				}
				console.log(postdata)
				let get_list = []
				postAjax('file/fileExchangeList',postdata,function(data){
					console.log(data)
					if(data.code==0){
						get_list = data.data
						if(get_list.length>0){
							that.changeList = that.changeList.concat(get_list);
							that.pageindex++
						}else{
							that.loadingText = '已加载全部';
						}
						if (that.changeList.length < 8) {
							that.loadingText = '';
						}
						uni.hideNavigationBarLoading();
					}else{
						get_list = []
						uni.hideNavigationBarLoading();
					}
				})
			},
			onReachBottom() {
				let that = this
				that.get_change_list()
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F9F9F9;
	}
	.grey{width: 30upx;height: 30upx;background-color: #DDDDDD;margin-right: 18upx;}
	.inputbox{margin-top:18upx ;padding:14upx 30upx;border:2upx solid rgba(203,229,255,1);border-radius: 6upx;width: 118upx;}
	.exinput{color: #FF4242;font-size: 30upx;font-weight: 600;}
	.exrule{padding:14upx 40upx;font-size: 30upx;margin:24upx 120upx 30upx;color: #333;text-align: center;border:2upx solid #CBE5FF;border-radius: 6upx;}
	.exbtn{width: 230upx;height: 58upx;margin: 0 auto;line-height: 58upx;text-align: center;border-radius: 6upx;background-color: #1D84E8;color: #fff;font-size: 30upx;}
	.changeitem{padding:22upx 30upx 22upx 58upx;position: relative;border-top:2upx solid #eee;font-size:30upx;}
	.changeimg{width: 30upx;height: 30upx;margin:0 40upx;}
	.changetxt{color: #666;font-size: 28upx;}
	.changename{margin-bottom: 18upx;}
	.exchangebtn{width: 120upx;height: 50upx;position: absolute;bottom:22upx;right:30upx;
	line-height: 50upx;background-color: #EC6104;color: #fff;font-size: 28upx;border-radius: 6upx;text-align: center;}
	.btmbox{position: fixed;width: 100%;z-index: 99;font-size: 28upx;color: #333;bottom: 0;left: 0;right: 0;background-color: #fff;}
	.recent{width: 104upx;height:80upx;margin-right: 26upx;line-height: 1.5;text-align: center;font-size: 26upx;color: #666;background-color: #CBE5FF;border-radius: 6upx;}
	.availist{position: absolute;width:200upx;box-shadow:0px 4upx 8upx rgba(203,229,255,1);background-color: #fff;font-size: 28upx;color: #666;top:58upx}
	.availist>.aitem:not(:last-child){border-bottom: 2upx solid #eee;}
	.aitem{margin: 0 12upx;padding: 14upx 0;}
	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.fixedtop{
		position: fixed;top:0;left:0;z-index:99;width: 100%;background-color: #fff;
	}
	.pageHeader{height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}

	.rebtn {
		display: inline-block;
		font-size: 30upx;
		border-radius: 8upx;
		height: 58upx;
		line-height: 58upx;
		position: absolute;
		bottom: 26upx;
		right: 40upx;
	}
	.loading {
		text-align: center;
		line-height: 50px;
		font-size: 30upx;
		color: #666;
	}
	.rebtn::after {
		border: none;
	}


	.empty {
		width: 100%;
		padding-top: 30upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #f9f9f9;
	
	}
	
	.empty image {
		width:240upx;
		height: 220upx;
		margin-top: 50upx;
	}
	
	.empty-tips {
		display: flex;
		font-size: 30upx;
		margin-top: 20upx;
		color: #666;
	
	}

	.navbar {
		display: flex;
		height: 80upx;
		color: #999;
		/* box-shadow: 0 2px 5px rgba(0,0,0,.06); */
		position: relative;
		z-index: 10;
		margin: 20upx 30upx 10upx ;
		padding-bottom: 10upx;
		border-bottom: 2upx solid #eee;
	}

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #303133;
		position: relative;
		
	}
	.navtxt{
		padding: 14upx 54upx;
		border:2upx solid #fff;
		border-radius: 6upx;
	}
	.current {
		color: #1D84E8;
		border:2upx solid #1D84E8
	}

	/* .current:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 54upx;
		height: 0;
		border-bottom: 2px solid #EC6104;
	}
 */
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}
	.enoughbox{
		padding: 50upx 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}
	.uni-tip-contents{
		padding:0 60upx;
		text-align: center;
		font-size: 16px;
		line-height: 1.5;
		color: #666;
	}
	.obtain{
		width: 332upx;
		padding: 12upx 60upx;
		border:2upx solid #CBE5FF;
		border-radius: 6upx;
		margin:20upx auto;
	}
	.safeinpbox{width: 310upx;padding: 16upx 0;margin: 0 auto;background-color: #CBE5FF;border-radius: 6upx;}
	.safeinpbox>input{text-align: center;width: 100%;}
	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	
	.uni-tip-content {
		padding: 20px 0;
		text-align: center;
		font-size: 16px;
		color: #666;
	}
	
	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
	}
	.uni-tip-group{
		border-top: 1px solid #eee
	}
	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
	.backbtn{
		width: 170upx;height: 68upx;line-height: 68upx;display: inline-block;margin: 0 auto;background-color: #1D84E8;border-radius: 6upx;text-align: center;font-size: 30upx;color: #fff;
	}
</style>
